<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .drag{width:300px;height:200px;background: red;position: absolute;left:40px;top:40px;}
    .drag h2{margin: 0;padding: 4px 0;background: #222;color: #fff;cursor: move;}
  </style>
</head>
<body>
  <div class="drag">
    <h2>这是标题</h2>
  </div>
</body>
<script>

  var drag = document.querySelector(".drag");
  var h2 = document.querySelector(".drag h2");
  // 提前获取元素能拖拽的最大left和top，用于做边界限定
  var maxLeft = document.documentElement.clientWidth - drag.offsetWidth;
  var maxTop = document.documentElement.clientHeight - drag.offsetHeight;
  // 在元素身上按下
  h2.addEventListener("mousedown", function(eve){
    var downE = eve || window.event
    // 在网页身上移动
    document.addEventListener("mousemove", move);
    // 在网页身上抬起
    document.addEventListener("mouseup", up);

    function move(eve){
      var moveE = eve || window.event;
      // 计算元素的位置：移动时鼠标相对于页面的坐标 - 按下时鼠标相对于元素的坐标
      var l = moveE.pageX - downE.offsetX;
      var t = moveE.pageY - downE.offsetY;
      // 边界限定
      if(l < 0) l = 0;
      if(t < 0) t = 0;
      if(l > maxLeft) l = maxLeft;
      if(t > maxTop) t = maxTop;
      // 将位置设置给元素
      drag.style.left = l + "px";
      drag.style.top = t + "px";
    }
    
    function up(){
      // 抬起鼠标时，删除移动事件（定住元素）
      document.removeEventListener("mousemove", move);
      // 抬起鼠标时，删除抬起事件（节省性能）
      document.removeEventListener("mouseup", up)
    }
  })

  
</script>
</html>